<template>
  <el-container>
    <el-header style="height: 15%;" class="my-header">Header</el-header>
    <el-container style="height:85%;">
      <el-aside class="my-aside">
        <test-aside/>
      </el-aside>
      <el-main class="my-main">
        <test-content/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import TestAside from './testAside'
import TestContent from './testContent'
export default {
  name: 'test1',
  components: {TestContent, TestAside},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() { // 渲染后执行
  },
  methods: {},

}
</script>

<style>
.my-header{
  color: #333;
}

.my-aside {
  color: #333;
  overflow:auto

}

.my-main {
  color: #333;
  overflow:auto
}



html, body, #app, .el-container {
  padding: 0px;
  margin: 0px;
  height: 100%;

}

/* 整个滚动条背景 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #F5F5F5;
}

#left-menu::-webkit-scrollbar {
  display: none;
}

/*!* 滚动条上的按钮 (上下箭头). *!*/
/*::-webkit-scrollbar-button {*/
/*width: 20px;*/
/*background-color: rgb(166, 167, 173);*/
/*opacity: 0.2;*/
/*}*/
::-webkit-scrollbar-thumb {
  width: 10px;
  /* 上下两头给个圆角 */
  background-color: #CBCBCB;
  border-radius: 10px;
  /* 还可以给它加个阴影 */
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

/*!* 滚动条轨道 *!*/
/*::-webkit-scrollbar-track {*/
/*box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
/*border-radius: 10px;*/
/*background-color: #ebe9e9;*/
/*}*/
/* 当同时有垂直滚动条和水平滚动条时交汇的部分. */
::-webkit-scrollbar-corner {
  background: steelblue;
  border-radius: 50% 50%;
}
</style>
